precision mediump float;
uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

/**
 * 旋转向量函数
 * @param v 需要旋转的二维向量
 * @param a 旋转角度（弧度）
 * @return 旋转后的二维向量
 */
vec2 rotate(vec2 v, float a) {
    float s = sin(a);
    float c = cos(a);
    mat2 m = mat2(c, s, -s, c);
    return m * v;
}

void main(void) {
    // 将屏幕坐标转换为标准化设备坐标
    vec2 p = (gl_FragCoord.xy * 2. - u_resolution) / min(u_resolution.x, u_resolution.y);
    float d = 0.5;
    vec4 col = vec4(0.);

    // 将坐标系旋转60度加上时间变量形成动画效果
    p = rotate(p, 60. + u_time);

    //角度大于0度，小于60度 根据atan角度关系在第一象限和第三象限是满足该要求
    if(atan(p.y / p.x) > radians(0.) && atan(p.y / p.x) < radians(80.)) {
        d = length(p);
       // 创建平滑的环形区域
        d = smoothstep(0.4, 0.41, d) - smoothstep(0.41, 0.42, d); 
       // 在基础颜色上混合红色
        col = mix(col, vec4(1., 0., 0., 1.), d);

    } else {
        d = length(p);
         // 创建平滑的环形区域
        d = smoothstep(0.4, 0.41, d) - smoothstep(0.41, 0.42, d); 
         // 在基础颜色上混合绿色
        col = mix(col, vec4(0.546, 1.000, 0.130, 1.000), d);

    }
    gl_FragColor = col;
}